<div id="aliases_page" class="page">
  <section class="content-header">
    <h1 data-i18n="aliases">Aliases</h1>
    <div style="position:absolute;top:9px;right:9px;">
      <form action="#" method="get" class="form" id="alias_search" style="width:180px;margin:0;display:inline-block;vertical-align:middle;" autocomplete="off">
        <div class="input-group">
          <input type="text" name="q" id="search_aliases" class="form-control" placeholder="Search Aliases..." data-i18n="[placeholder]search_aliases">
          <span class="input-group-btn">
          <button type="submit" name="search" class="btn btn-flat"><i class="fas fa-search"></i></button>
          </span>
        </div>
      </form>
      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#register_alias_modal" style="display:inline-block;vertical-align:middle;" data-i18n="register_alias">Register Alias</button>
    </div>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner inner-smaller">
            <h3><span id="alias_count" class="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="aliases_owned">Aliases Owned</p>
          </div>
          <div class="icon" style="bottom:-10px"><i class="fas fa-briefcase"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner inner-smaller">
            <h3><span id="empty_alias_count" class="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="empty_aliases">Empty Aliases</p>
          </div>
          <div class="icon" style="bottom:-10px"><i class="fas fa-exclamation-circle"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
          <div class="inner inner-smaller">
            <h3><span id="alias_uri_count" class="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="aliases_to_uri">Aliases to URI</p>
          </div>
          <div class="icon" style="bottom:-10px"><i class="fas fa-cloud"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
          <div class="inner inner-smaller">
            <h3><span id="alias_account_count" class="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="aliases_to_account_id">Aliases to Account ID</p>
          </div>
          <div class="icon" style="bottom:-10px"><i class="fas fa-address-card"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
    </div>
    <div class="data-container data-loading">
      <table class="table table-striped" id="aliases_table">
        <thead>
          <tr>
            <th data-i18n="alias">Alias</th>
            <th data-i18n="uri">URI</th>
            <th data-i18n="status" style="width:5%">Status</th>
            <th data-i18n="actions" style="width:10%">Actions</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <div id="loading_aliases"></div>
      <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
      <div class="data-empty-container">
        <p data-i18n="[html]no_aliases_yet">No aliases yet, <a href="#" data-toggle="modal" data-target="#register_alias_modal">register one!</a></p>
      </div>
    </div>
  </section>
</div>